*{
    padding: 0;
    margin: 0;
}
body{
    height: 100vh;
    background-color: #827593;
}
.container{
    display: flex;
    flex-direction: column;
    width: 560px;
    height: 320px;
    margin: 100px auto;
    background-color: #e5e3e8;
    }

    .container .menu{
        display: flex;
        align-items: center;
        margin: 0 auto;
        width: 300px;
        height: 85px;
    }

    .container .menu div{
        width: 100%;
        text-align:center;
    }

    .container .menu div span{
        cursor:pointer;
    }

    .clock{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        width:400px;
        height: 150px;
        background-color: #5f546e;
        box-shadow: 0 0 40px rgba(0,0,0,0.6);
    }

    .clock .clock-item{
        display: flex;
            flex-direction: column;
            align-items: flex-end;
            width:60px;
            margin: 0 30px;
    }

    .clock .clock-item div{
        font-size:12px;
        color:#ccc;
    }

    .clock .clock-item span{
        font-size:60px;
        font-weight: 100;
        color:#fff;
        letter-spacing: 5px;
    }

    .toast{
        position: absolute;
        top:calc(50% + 30px);
        left:calc(50% - 100px);
        width: 200px;
        height:50px;
        line-height:50px;
        text-align:center;
        color: #fff;
        background-color: rgba(0,0,0,0.6);
        opacity: 0;
        /* 为了不影响交互  让提示框进行穿透设置*/
        pointer-events: none;
    }
